ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ API: ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್‌ನಲ್ಲಿ ಪಾಂಡಿತ್ಯ

ಇಂದಿನ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆ ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ನಿಧಾನವಾದ ವೆಬ್‌ಸೈಟ್ ಬಳಕೆದಾರರಲ್ಲಿ ಹತಾಶೆ, ಹೆಚ್ಚಿನ ಬೌನ್ಸ್ ದರಗಳು ಮತ್ತು ಅಂತಿಮವಾಗಿ ಆದಾಯ ನಷ್ಟಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ API ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ವಿವಿಧ ಅಂಶಗಳನ್ನು ಅಳೆಯಲು ಮತ್ತು ವಿಶ್ಲೇಷಿಸಲು ಪ್ರಬಲ ಸಾಧನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ನಿಮಗೆ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ವೇಗವಾದ, ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ APIಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ, ವಿಶ್ವಾದ್ಯಂತ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಕ್ರಿಯಾತ್ಮಕ ಒಳನೋಟಗಳನ್ನು ನೀಡುತ್ತದೆ.

ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲ್ವಿಚಾರಣೆಯ ಅಗತ್ಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

APIಯ ನಿರ್ದಿಷ್ಟತೆಗಳನ್ನು ತಿಳಿಯುವ ಮೊದಲು, ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲ್ವಿಚಾರಣೆ ಏಕೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳೋಣ:

• ಬಳಕೆದಾರರ ಅನುಭವ: ವೇಗದ ವೆಬ್‌ಸೈಟ್ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ, ಬಳಕೆದಾರರ ತೃಪ್ತಿ ಮತ್ತು ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
• ಸರ್ಚ್ ಇಂಜಿನ್ ಆಪ್ಟಿಮೈಸೇಶನ್ (SEO): ಗೂಗಲ್‌ನಂತಹ ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ವೆಬ್‌ಸೈಟ್ ವೇಗವನ್ನು ರ‍್ಯಾಂಕಿಂಗ್ ಅಂಶವಾಗಿ ಪರಿಗಣಿಸುತ್ತವೆ.
• ಪರಿವರ್ತನೆ ದರಗಳು: ವೇಗದ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚಿನ ಪರಿವರ್ತನೆ ದರಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ. ವೆಬ್‌ಸೈಟ್ ಸ್ಪಂದಿಸುತ್ತಿದ್ದರೆ ಬಳಕೆದಾರರು ಖರೀದಿಯನ್ನು ಪೂರ್ಣಗೊಳಿಸುವ ಅಥವಾ ಸೇವೆಗೆ ಸೈನ್ ಅಪ್ ಮಾಡುವ ಸಾಧ್ಯತೆ ಹೆಚ್ಚು.
• ಮೊಬೈಲ್ ಕಾರ್ಯಕ್ಷಮತೆ: ಮೊಬೈಲ್ ಸಾಧನಗಳ ಹೆಚ್ಚುತ್ತಿರುವ ಬಳಕೆಯಿಂದ, ಮೊಬೈಲ್ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಅತ್ಯಗತ್ಯ.
• ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿ: ಪ್ರಪಂಚದ ವಿವಿಧ ಭಾಗಗಳ ಬಳಕೆದಾರರು ವಿಭಿನ್ನ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಅನುಭವಿಸಬಹುದು. ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲ್ವಿಚಾರಣೆಯು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಅವರ ಸ್ಥಳವನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಥಿರವಾದ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ API ಪರಿಚಯ

ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ API ಎಂಬುದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಟರ್ಫೇಸ್‌ಗಳ ಸಂಗ್ರಹವಾಗಿದ್ದು, ಇದು ವೆಬ್‌ಪುಟದ ವಿವರವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್‌ಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಪುಟ ಲೋಡ್ ಆಗಲು, ಸಂಪನ್ಮೂಲಗಳನ್ನು ತರಲು ಮತ್ತು ಈವೆಂಟ್‌ಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಅಳೆಯಲು ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಈ ಮಾಹಿತಿಯನ್ನು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಬಳಸಬಹುದು.

ಇದರ ಪ್ರಮುಖ ಇಂಟರ್ಫೇಸ್ Performance ಆಗಿದೆ, ಇದನ್ನು window.performance ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದು. ಈ ಇಂಟರ್ಫೇಸ್ ವಿವಿಧ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಸಂಬಂಧಿಸಿದ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ವಿಧಾನಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ API: ಪುಟ ಲೋಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯುವುದು

ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ API ಪುಟ ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯ ವಿವಿಧ ಹಂತಗಳ ಬಗ್ಗೆ ವಿವರವಾದ ಸಮಯದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ವಿಳಂಬಗಳು ಎಲ್ಲಿ ಸಂಭವಿಸುತ್ತಿವೆ ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ಗುರುತಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಆಪ್ಟಿಮೈಸೇಶನ್ ಪ್ರಯತ್ನಗಳನ್ನು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಕೇಂದ್ರೀಕರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ ಒದಗಿಸುವ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್ಸ್‌ಗಳು

• navigationStart: ಬ್ರೌಸರ್ ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• unloadEventStart: ಹಿಂದಿನ ಪುಟದಲ್ಲಿ ಅನ್‌ಲೋಡ್ ಈವೆಂಟ್ ಪ್ರಾರಂಭವಾದಾಗ ಸಮಯಮುದ್ರೆ.
• unloadEventEnd: ಹಿಂದಿನ ಪುಟದಲ್ಲಿ ಅನ್‌ಲೋಡ್ ಈವೆಂಟ್ ಕೊನೆಗೊಂಡಾಗ ಸಮಯಮುದ್ರೆ.
• redirectStart: ಮರುನಿರ್ದೇಶನ ಪ್ರಾರಂಭವಾದಾಗ ಸಮಯಮುದ್ರೆ.
• redirectEnd: ಮರುನಿರ್ದೇಶನ ಕೊನೆಗೊಂಡಾಗ ಸಮಯಮುದ್ರೆ.
• fetchStart: ಬ್ರೌಸರ್ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ತರಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• domainLookupStart: ಡೊಮೇನ್ ನೇಮ್ ಲುಕಪ್ ಪ್ರಾರಂಭವಾದಾಗ ಸಮಯಮುದ್ರೆ.
• domainLookupEnd: ಡೊಮೇನ್ ನೇಮ್ ಲುಕಪ್ ಕೊನೆಗೊಂಡಾಗ ಸಮಯಮುದ್ರೆ.
• connectStart: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ಗೆ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• connectEnd: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ಗೆ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• secureConnectionStart: ಬ್ರೌಸರ್ ಸುರಕ್ಷಿತ ಸಂಪರ್ಕ ಹ್ಯಾಂಡ್‌ಶೇಕ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• requestStart: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ವಿನಂತಿಸಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• responseStart: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ ಪ್ರತಿಕ್ರಿಯೆಯ ಮೊದಲ ಬೈಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• responseEnd: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸ್ವೀಕರಿಸುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• domLoading: ಬ್ರೌಸರ್ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• domInteractive: ಬ್ರೌಸರ್ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಮತ್ತು DOM ಸಿದ್ಧವಾದಾಗ ಸಮಯಮುದ್ರೆ.
• domContentLoadedEventStart: DOMContentLoaded ಈವೆಂಟ್ ಪ್ರಾರಂಭವಾದಾಗ ಸಮಯಮುದ್ರೆ.
• domContentLoadedEventEnd: DOMContentLoaded ಈವೆಂಟ್ ಕೊನೆಗೊಂಡಾಗ ಸಮಯಮುದ್ರೆ.
• domComplete: ಬ್ರೌಸರ್ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಮತ್ತು ಎಲ್ಲಾ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ ಸಮಯಮುದ್ರೆ.
• loadEventStart: ಲೋಡ್ ಈವೆಂಟ್ ಪ್ರಾರಂಭವಾದಾಗ ಸಮಯಮುದ್ರೆ.
• loadEventEnd: ಲೋಡ್ ಈವೆಂಟ್ ಕೊನೆಗೊಂಡಾಗ ಸಮಯಮುದ್ರೆ.

ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸುವುದು

ನೀವು performance.timing ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿಕೊಂಡು ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಬಹುದು:

            
const navigationTiming = performance.timing;

console.log('Navigation Start:', navigationTiming.navigationStart);
console.log('Domain Lookup Time:', navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart);
console.log('Connect Time:', navigationTiming.connectEnd - navigationTiming.connectStart);
console.log('Response Time:', navigationTiming.responseEnd - navigationTiming.responseStart);
console.log('DOM Interactive:', navigationTiming.domInteractive - navigationTiming.navigationStart);
console.log('DOM Complete:', navigationTiming.domComplete - navigationTiming.navigationStart);
console.log('Load Time:', navigationTiming.loadEventEnd - navigationTiming.navigationStart);

            

              
                Copy
              
            
          

ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ಅರ್ಥೈಸಿಕೊಳ್ಳುವುದು

ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸುವುದರಿಂದ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಅಮೂಲ್ಯವಾದ ಒಳನೋಟಗಳನ್ನು ತಿಳಿಯಬಹುದು. ಉದಾಹರಣೆಗೆ:

• ಹೆಚ್ಚಿನ DNS ಲುಕಪ್ ಸಮಯ: ನಿಮ್ಮ DNS ಪೂರೈಕೆದಾರರೊಂದಿಗೆ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಅಥವಾ ನಿಧಾನವಾದ DNS ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.
• ಹೆಚ್ಚಿನ ಸಂಪರ್ಕ ಸಮಯ: ನಿಮ್ಮ ಸರ್ವರ್‌ನ ನೆಟ್‌ವರ್ಕ್ ಸಂಪರ್ಕದೊಂದಿಗೆ ಸಮಸ್ಯೆಗಳನ್ನು ಅಥವಾ ನಿಧಾನವಾದ TLS ಹ್ಯಾಂಡ್‌ಶೇಕ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.
• ಹೆಚ್ಚಿನ ಪ್ರತಿಕ್ರಿಯೆ ಸಮಯ: ನಿಧಾನವಾದ ಸರ್ವರ್-ಸೈಡ್ ಪ್ರಕ್ರಿಯೆ ಅಥವಾ ದೊಡ್ಡ ಪ್ರತಿಕ್ರಿಯೆ ಗಾತ್ರಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ.
• ಹೆಚ್ಚಿನ DOM ಇಂಟರಾಕ್ಟಿವ್ ಸಮಯ: ಅಸಮರ್ಥ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅಥವಾ ಸಂಕೀರ್ಣ DOM ರಚನೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ.
• ಹೆಚ್ಚಿನ DOM ಕಂಪ್ಲೀಟ್ ಸಮಯ: ಚಿತ್ರಗಳು, ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಂತಹ ಸಂಪನ್ಮೂಲಗಳ ನಿಧಾನ ಲೋಡಿಂಗ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: ಮೊದಲ ಬೈಟ್‌ಗೆ ಸಮಯವನ್ನು (TTFB) ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದು

ಮೊದಲ ಬೈಟ್‌ಗೆ ಸಮಯ (TTFB) ಒಂದು ನಿರ್ಣಾಯಕ ಮೆಟ್ರಿಕ್ ಆಗಿದ್ದು, ಇದು ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ ಡೇಟಾದ ಮೊದಲ ಬೈಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಅಳೆಯುತ್ತದೆ. ವೇಗದ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಕಡಿಮೆ TTFB ಅತ್ಯಗತ್ಯ.

            
const ttfb = performance.timing.responseStart - performance.timing.navigationStart;
console.log('Time to First Byte (TTFB):', ttfb, 'ms');

            

              
                Copy
              
            
          

ಹೆಚ್ಚಿನ TTFB ನಿಧಾನವಾದ ಸರ್ವರ್-ಸೈಡ್ ಪ್ರಕ್ರಿಯೆ, ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿ ಅಥವಾ ಸರ್ವರ್‌ನ ಮೂಲಸೌಕರ್ಯದ ಸಮಸ್ಯೆಗಳಿಂದ ಉಂಟಾಗಬಹುದು. ನಿಮ್ಮ ಸರ್ವರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು, ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್‌ವರ್ಕ್ (CDN) ಬಳಸುವುದು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು TTFB ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ API: ಸಂಪನ್ಮೂಲ ಲೋಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯುವುದು

ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ API ವೆಬ್‌ಪುಟದಲ್ಲಿ ಚಿತ್ರಗಳು, ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು, ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ಮತ್ತು ಫಾಂಟ್‌ಗಳಂತಹ ಪ್ರತ್ಯೇಕ ಸಂಪನ್ಮೂಲಗಳ ಲೋಡಿಂಗ್ ಬಗ್ಗೆ ವಿವರವಾದ ಸಮಯದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಯಾವ ಸಂಪನ್ಮೂಲಗಳು ಲೋಡ್ ಆಗಲು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತಿವೆ ಎಂಬುದನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಅವುಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಒದಗಿಸುವ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್ಸ್‌ಗಳು

• name: ಸಂಪನ್ಮೂಲದ URL.
• initiatorType: ಸಂಪನ್ಮೂಲ ವಿನಂತಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿದ ಅಂಶದ ಪ್ರಕಾರ (ಉದಾ. img, script, link).
• startTime: ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲವನ್ನು ತರಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• redirectStart: ಮರುನಿರ್ದೇಶನ ಪ್ರಾರಂಭವಾದಾಗ ಸಮಯಮುದ್ರೆ.
• redirectEnd: ಮರುನಿರ್ದೇಶನ ಕೊನೆಗೊಂಡಾಗ ಸಮಯಮುದ್ರೆ.
• fetchStart: ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲವನ್ನು ತರಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• domainLookupStart: ಡೊಮೇನ್ ನೇಮ್ ಲುಕಪ್ ಪ್ರಾರಂಭವಾದಾಗ ಸಮಯಮುದ್ರೆ.
• domainLookupEnd: ಡೊಮೇನ್ ನೇಮ್ ಲುಕಪ್ ಕೊನೆಗೊಂಡಾಗ ಸಮಯಮುದ್ರೆ.
• connectStart: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ಗೆ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• connectEnd: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ಗೆ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• secureConnectionStart: ಬ್ರೌಸರ್ ಸುರಕ್ಷಿತ ಸಂಪರ್ಕ ಹ್ಯಾಂಡ್‌ಶೇಕ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• requestStart: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ ಸಂಪನ್ಮೂಲವನ್ನು ವಿನಂತಿಸಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• responseStart: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ ಪ್ರತಿಕ್ರಿಯೆಯ ಮೊದಲ ಬೈಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• responseEnd: ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸ್ವೀಕರಿಸುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಸಮಯಮುದ್ರೆ.
• duration: ಸಂಪನ್ಮೂಲವನ್ನು ಲೋಡ್ ಮಾಡಲು ತೆಗೆದುಕೊಂಡ ಒಟ್ಟು ಸಮಯ.

ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸುವುದು

ನೀವು performance.getEntriesByType('resource') ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಬಹುದು:

            
const resourceTimings = performance.getEntriesByType('resource');

resourceTimings.forEach(resource => {
  console.log('Resource Name:', resource.name);
  console.log('Initiator Type:', resource.initiatorType);
  console.log('Duration:', resource.duration, 'ms');
});

            

              
                Copy
              
            
          

ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ಅರ್ಥೈಸಿಕೊಳ್ಳುವುದು

ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುವ ಸಮಯಕ್ಕಾಗಿ ಅವುಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

• ದೊಡ್ಡ ಚಿತ್ರಗಳು: ಚಿತ್ರಗಳನ್ನು ಕಂಪ್ರೆಸ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಸೂಕ್ತವಾದ ಫೈಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು (ಉದಾ. WebP) ಬಳಸುವ ಮೂಲಕ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
• ಆಪ್ಟಿಮೈಜ್ ಮಾಡದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು: ಅವುಗಳ ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಮಿನಿಫೈ ಮತ್ತು ಕಂಪ್ರೆಸ್ ಮಾಡಿ.
• ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಫಾಂಟ್‌ಗಳು: ವೆಬ್ ಫಾಂಟ್‌ಗಳನ್ನು ಉಪವಿಭಾಗ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಫಾಂಟ್-ಡಿಸ್‌ಪ್ಲೇ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ದಕ್ಷತೆಯಿಂದ ಬಳಸಿ.
• ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸಂಪನ್ಮೂಲಗಳು: ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸಂಪನ್ಮೂಲಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಪರ್ಯಾಯಗಳನ್ನು ಪರಿಗಣಿಸಿ.

ಉದಾಹರಣೆ: ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಚಿತ್ರಗಳನ್ನು ಗುರುತಿಸುವುದು

ಈ ಉದಾಹರಣೆಯು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ API ಬಳಸಿ ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಚಿತ್ರಗಳನ್ನು ಹೇಗೆ ಗುರುತಿಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ:

            
const resourceTimings = performance.getEntriesByType('resource');

const slowImages = resourceTimings.filter(resource => resource.initiatorType === 'img' && resource.duration > 500);

if (slowImages.length > 0) {
  console.warn('Slow-loading images detected:');
  slowImages.forEach(image => {
    console.log('Image URL:', image.name);
    console.log('Duration:', image.duration, 'ms');
  });
}

            

              
                Copy
              
            
          

ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಚಿತ್ರಗಳನ್ನು ಗುರುತಿಸಿದ ನಂತರ, ನೀವು ಅವುಗಳನ್ನು ಕಂಪ್ರೆಸ್ ಮಾಡುವ ಮೂಲಕ, ಸೂಕ್ತವಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸುವ ಮೂಲಕ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್ ತಂತ್ರಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಹುದು.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶ: ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್ ಆಪ್ಟಿಮೈಸೇಶನ್

ಜಾಗತಿಕವಾಗಿ ಗ್ರಾಹಕರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುತ್ತಿರುವ ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸುವುದರಿಂದ ಈ ಕೆಳಗಿನ ಸಮಸ್ಯೆಗಳು ಬಹಿರಂಗಗೊಳ್ಳುತ್ತವೆ:

• ಏಷ್ಯಾದಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚಿನ TTFB: ಮೂಲ ಸರ್ವರ್ ಮತ್ತು ಏಷ್ಯಾದಲ್ಲಿನ ಬಳಕೆದಾರರ ನಡುವೆ ನಿಧಾನವಾದ ಸರ್ವರ್-ಸೈಡ್ ಪ್ರಕ್ರಿಯೆ ಅಥವಾ ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿಯನ್ನು ಸೂಚಿಸುತ್ತದೆ.
• ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಉತ್ಪನ್ನ ಚಿತ್ರಗಳು: ಚಿತ್ರಗಳನ್ನು ವೆಬ್‌ಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿಲ್ಲ, ಇದು ದೀರ್ಘ ಲೋಡಿಂಗ್ ಸಮಯಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಆಪ್ಟಿಮೈಜ್ ಮಾಡದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳು: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಮಿನಿಫೈ ಮತ್ತು ಕಂಪ್ರೆಸ್ ಮಾಡಿಲ್ಲ, ಇದು ಹೆಚ್ಚಿದ ಫೈಲ್ ಗಾತ್ರಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಈ ಸಂಶೋಧನೆಗಳ ಆಧಾರದ ಮೇಲೆ, ಈ ಕೆಳಗಿನ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು:

• ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್‌ವರ್ಕ್ (CDN) ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ: ವಿವಿಧ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ಲೇಟೆನ್ಸಿಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ವೆಬ್‌ಸೈಟ್ ವಿಷಯವನ್ನು ಜಾಗತಿಕವಾಗಿ ಬಹು ಸರ್ವರ್‌ಗಳಲ್ಲಿ ವಿತರಿಸಿ.
• ಉತ್ಪನ್ನ ಚಿತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ImageOptim ಅಥವಾ TinyPNG ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ಚಿತ್ರಗಳನ್ನು ಕಂಪ್ರೆಸ್ ಮಾಡಿ ಮತ್ತು WebP ನಂತಹ ಸೂಕ್ತವಾದ ಫೈಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸಿ.
• ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಮಿನಿಫೈ ಮತ್ತು ಕಂಪ್ರೆಸ್ ಮಾಡಿ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಮಿನಿಫೈ ಮಾಡಲು UglifyJS ಅಥವಾ Terser ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ಕಂಪ್ರೆಸ್ ಮಾಡಲು Gzip ಅಥವಾ Brotli ಬಳಸಿ.
• ಚಿತ್ರಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಿ: ಆರಂಭಿಕ ಪುಟ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸಲು ಫೋಲ್ಡ್‌ನ ಕೆಳಗಿರುವ ಚಿತ್ರಗಳಿಗಾಗಿ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.

ಈ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿದ ನಂತರ, ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ, ಇದರ ಪರಿಣಾಮವಾಗಿ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವ, ಹೆಚ್ಚಿನ ಪರಿವರ್ತನೆ ದರಗಳು ಮತ್ತು ಸುಧಾರಿತ SEO ರ‍್ಯಾಂಕಿಂಗ್‌ಗಳು ದೊರೆಯುತ್ತವೆ.

ಮೊಬೈಲ್ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್

ಮೊಬೈಲ್ ಬಳಕೆದಾರರು ಸಾಮಾನ್ಯವಾಗಿ ಡೆಸ್ಕ್‌ಟಾಪ್ ಬಳಕೆದಾರರಿಗೆ ಹೋಲಿಸಿದರೆ ನಿಧಾನವಾದ ನೆಟ್‌ವರ್ಕ್ ಸಂಪರ್ಕಗಳನ್ನು ಅನುಭವಿಸುತ್ತಾರೆ. ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ತಡೆರಹಿತ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಮೊಬೈಲ್ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ಕೆಲವು ಮೊಬೈಲ್-ನಿರ್ದಿಷ್ಟ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:

• ಸ್ಪಂದಿಸುವ ಚಿತ್ರಗಳನ್ನು ಬಳಸಿ: ನೆಟ್‌ವರ್ಕ್ ಮೂಲಕ ವರ್ಗಾಯಿಸಲಾದ ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಾಧನದ ಪರದೆಯ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ವಿಭಿನ್ನ ಚಿತ್ರ ಗಾತ್ರಗಳನ್ನು ಒದಗಿಸಿ.
• ಸ್ಪರ್ಶಕ್ಕಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ಬಟನ್‌ಗಳು ಮತ್ತು ಲಿಂಕ್‌ಗಳು ಸಾಕಷ್ಟು ದೊಡ್ಡದಾಗಿವೆಯೆ ಮತ್ತು ಸ್ಪರ್ಶ ಸಾಧನಗಳಲ್ಲಿ ಸುಲಭವಾಗಿ ಟ್ಯಾಪ್ ಮಾಡಲು ಸಾಕಷ್ಟು ಅಂತರವನ್ನು ಹೊಂದಿವೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• HTTP ವಿನಂತಿಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ: CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ಕ್ರಿಟಿಕಲ್ CSS ಅನ್ನು ಇನ್‌ಲೈನ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು CSS ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ HTTP ವಿನಂತಿಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
• ಫೋಲ್ಡ್‌ನ ಮೇಲಿನ ವಿಷಯಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ: ವೆಬ್‌ಸೈಟ್‌ನ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಮೊದಲು ಪರದೆಯ ಮೇಲೆ ಗೋಚರಿಸುವ ವಿಷಯವನ್ನು ಲೋಡ್ ಮಾಡಿ.

ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಮೀರಿ: ಇತರ ಕಾರ್ಯಕ್ಷಮತೆ APIಗಳನ್ನು ಅನ್ವೇಷಿಸುವುದು

ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಅತ್ಯಗತ್ಯವಾಗಿದ್ದರೂ, ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ API ಆಳವಾದ ಕಾರ್ಯಕ್ಷಮತೆ ವಿಶ್ಲೇಷಣೆಗಾಗಿ ಇತರ ಸಾಧನಗಳ ಸಂಪತ್ತನ್ನು ನೀಡುತ್ತದೆ:

• ಯೂಸರ್ ಟೈಮಿಂಗ್ API: ಕಸ್ಟಮ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮೆಟ್ರಿಕ್ಸ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಈವೆಂಟ್‌ಗಳು ಸಂಭವಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಅಳೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• ಲಾಂಗ್ ಟಾಸ್ಕ್ API: ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವ ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸ್ಪಂದಿಸುವಿಕೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ದೀರ್ಘಾವಧಿಯ ಕಾರ್ಯಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• ಪೇಂಟ್ ಟೈಮಿಂಗ್ API: ಫಸ್ಟ್ ಪೇಂಟ್ (FP) ಮತ್ತು ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP) ನಂತಹ ಪುಟದ ರೆಂಡರಿಂಗ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಮೆಟ್ರಿಕ್ಸ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (LCP): ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನಲ್ಲಿ ಅತಿದೊಡ್ಡ ವಿಷಯ ಅಂಶವು ಗೋಚರಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಅಳೆಯುತ್ತದೆ.
• ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS): ಪುಟ ಲೋಡ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸುವ ಅನಿರೀಕ್ಷಿತ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳ ಪ್ರಮಾಣವನ್ನು ಅಳೆಯುತ್ತದೆ.
• ಈವೆಂಟ್ ಟೈಮಿಂಗ್ API: ಕ್ಲಿಕ್ ಮತ್ತು ಕೀ ಪ್ರೆಸ್ ಈವೆಂಟ್‌ಗಳಂತಹ ಪುಟದೊಂದಿಗೆ ಬಳಕೆದಾರರ ಸಂವಹನಗಳ ಬಗ್ಗೆ ವಿವರವಾದ ಸಮಯದ ಮಾಹಿತಿಯನ್ನು ನೀಡುತ್ತದೆ.

ಕಾರ್ಯಕ್ಷಮತೆ ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಉಪಕರಣಗಳು

ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಹಲವಾರು ಸಾಧನಗಳು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಬಹುದು:

• ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು: ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಅಂತರ್ನಿರ್ಮಿತ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ, ಅದು ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ ಡೇಟಾವನ್ನು ಪರೀಕ್ಷಿಸಲು, ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• WebPageTest: ವಿಭಿನ್ನ ಸ್ಥಳಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಿಂದ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಉಚಿತ ಆನ್‌ಲೈನ್ ಸಾಧನ.
• Lighthouse: ವೆಬ್ ಪುಟಗಳ ಗುಣಮಟ್ಟವನ್ನು ಸುಧಾರಿಸಲು ಮುಕ್ತ-ಮೂಲ, ಸ್ವಯಂಚಾಲಿತ ಸಾಧನ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ, ಪ್ರಗತಿಶೀಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು, SEO ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ಆಡಿಟ್‌ಗಳನ್ನು ಹೊಂದಿದೆ.
• ಗೂಗಲ್ ಪೇಜ್‌ಸ್ಪೀಡ್ ಇನ್‌ಸೈಟ್ಸ್: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ವಿಶ್ಲೇಷಿಸುವ ಮತ್ತು ಸುಧಾರಣೆಗೆ ಶಿಫಾರಸುಗಳನ್ನು ಒದಗಿಸುವ ಉಚಿತ ಆನ್‌ಲೈನ್ ಸಾಧನ.
• New Relic, Datadog, ಮತ್ತು ಇತರ APM ಸಾಧನಗಳು: ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ವಿವರವಾದ ಕಾರ್ಯಕ್ಷಮತೆ ಮೇಲ್ವಿಚಾರಣೆ ಮತ್ತು ವಿಶ್ಲೇಷಣೆ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ.

ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಕೆಲವು ಸಾಮಾನ್ಯ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:

• HTTP ವಿನಂತಿಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ: CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, CSS ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ಮತ್ತು ಕ್ರಿಟಿಕಲ್ CSS ಅನ್ನು ಇನ್‌ಲೈನ್ ಮಾಡುವ ಮೂಲಕ HTTP ವಿನಂತಿಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
• ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್‌ವರ್ಕ್ (CDN) ಬಳಸಿ: ವಿವಿಧ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ಲೇಟೆನ್ಸಿಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ವಿಷಯವನ್ನು ಜಾಗತಿಕವಾಗಿ ಬಹು ಸರ್ವರ್‌ಗಳಲ್ಲಿ ವಿತರಿಸಿ.
• ಚಿತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ಚಿತ್ರಗಳನ್ನು ಕಂಪ್ರೆಸ್ ಮಾಡಿ, ಸೂಕ್ತವಾದ ಫೈಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು (ಉದಾ. WebP) ಬಳಸಿ, ಮತ್ತು ಸ್ಪಂದಿಸುವ ಚಿತ್ರಗಳನ್ನು ಬಳಸಿ.
• CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಮಿನಿಫೈ ಮತ್ತು ಕಂಪ್ರೆಸ್ ಮಾಡಿ: CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಮಿನಿಫೈ ಮತ್ತು ಕಂಪ್ರೆಸ್ ಮಾಡುವ ಮೂಲಕ ಅವುಗಳ ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
• ಬ್ರೌಸರ್ ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಿ: ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಸ್ಥಿರ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡಲು ಅನುಮತಿಸಲು ಸೂಕ್ತವಾದ ಕ್ಯಾಶ್ ಹೆಡರ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ನಿಮ್ಮ ಸರ್ವರ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ.
• ವೆಬ್ ಫಾಂಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ವೆಬ್ ಫಾಂಟ್‌ಗಳನ್ನು ಉಪವಿಭಾಗ ಮಾಡಿ, ಫಾಂಟ್-ಡಿಸ್‌ಪ್ಲೇ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ ಮತ್ತು ನಿಮ್ಮ ಸ್ವಂತ ಡೊಮೇನ್‌ನಲ್ಲಿ ಫಾಂಟ್‌ಗಳನ್ನು ಹೋಸ್ಟ್ ಮಾಡಿ.
• ನಿರ್ಣಾಯಕವಲ್ಲದ ಸಂಪನ್ಮೂಲಗಳ ಲೋಡಿಂಗ್ ಅನ್ನು ಮುಂದೂಡಿ: ಫೋಲ್ಡ್‌ನ ಕೆಳಗಿರುವ ಚಿತ್ರಗಳಿಗೆ ಲೇಜಿ ಲೋಡಿಂಗ್ ಬಳಸಿ ಮತ್ತು ನಿರ್ಣಾಯಕವಲ್ಲದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳ ಲೋಡಿಂಗ್ ಅನ್ನು ಮುಂದೂಡಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿಯಮಿತವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಗುರುತಿಸಲು ಮತ್ತು ಪರಿಹರಿಸಲು ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ API ಮತ್ತು ಇತರ ಸಾಧನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿರಂತರವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ.

ತೀರ್ಮಾನ

ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ API, ವಿಶೇಷವಾಗಿ ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಸೋರ್ಸ್ ಟೈಮಿಂಗ್ APIಗಳು, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಅಮೂಲ್ಯವಾದ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ APIಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮತ್ತು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಬಹುದು, ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುವ ಸಮಯಕ್ಕಾಗಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಹುದು ಮತ್ತು ಅಂತಿಮವಾಗಿ ನಿಮ್ಮ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿರಂತರವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮರೆಯದಿರಿ ಮತ್ತು ವೇಗವಾದ, ಸ್ಪಂದಿಸುವ ಮತ್ತು ಆಕರ್ಷಕವಾದ ಆನ್‌ಲೈನ್ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅಗತ್ಯವಿರುವಂತೆ ನಿಮ್ಮ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ.